<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="员工绩效-定制化"
        data-page-identification="y_auhlddz3b2"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_i5vpkrwxor 自定义模板_91za6gac5d -->
            <a-modal :body-style="bodyStyle" v-model:visible="ygState.exportScoreVisible" centered width="580px">
                <template #title>
                    <span class="modal-title">导出绩效分数</span>
                </template>
                <div class="export-title">
                    <div>
                        <ExclamationCircleFilled style="color: #3875ff" />
                    </div>
                    <div class="export-content"
                        >请下载模板，并根据模板中的各组织架构调整对应的员工名称后上传，系统将根据您调整的组织架构名称和员工名称填入对应员工的绩效详情。</div
                    >
                </div>
                <div class="tip">注意：请勿增加【列】、三行以上的空白【行】或其他【特殊标点符号】。</div>
                <div class="tip" style="margin-left: 40px">上传前对文件进行解密</div>
                <a-upload
                    :file-list="ygState.fileList"
                    :before-upload="handlerUpload"
                    @remove="handleRemove"
                    accept=".xlsx,.xls"
                >
                    <a-button type="primary">
                        <upload-outlined />
                        上传
                    </a-button>
                </a-upload>
                <span>支持格式:.xlsx,.xls</span>
                <template #footer>
                    <a-button type="ghost" @click="closeExport">取消</a-button>
                    <a-button type="primary" @click="downScoreTemplate">下载模板</a-button>
                    <a-button type="primary" @click="handlerUploadScore" :loading="exportLoading"
                        >导出绩效分数</a-button
                    >
                </template>
            </a-modal>
            <!--          评分弹窗-->
            <a-modal
                :body-style="bodyStyle"
                v-model:visible="ygState.giveScoreVisible"
                centered
                destroy-on-close
                width="410px"
                :ok-button-props="{ loading: giveScordLoading }"
                @ok="handlerSubmitGiveScore"
                @cancel="cancelGiveScore"
                :after-close="resetGiveScoreForm"
            >
                <template #title>
                    <span class="modal-title">{{ giveScroeType.title }}评分</span>
                </template>
                <a-form :model="giveScoreForm" ref="giveScoreRef">
                    <a-form-item
                        name="score"
                        :label="`${giveScroeType.title}评分`"
                        :label-col="{ span: 7 }"
                        :rules="[
                            {
                                required: true,
                                message: '请输入分数',
                                trigger: 'blur'
                            }
                        ]"
                    >
                        <a-input-number
                            placeholder="请输入分数"
                            v-model:value="giveScoreForm.score"
                            style="width: 100%"
                            :min="0"
                        />
                    </a-form-item>
                    <a-form-item
                        name="detail"
                        label="加减分备注"
                        :label-col="{ span: 7 }"
                        :rules="[{ required: true, message: '请输入加减分备注', trigger: 'blur' }]"
                    >
                        <a-textarea :rows="3" placeholder="请输入加减分备注" v-model:value="giveScoreForm.detail" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--          评分弹窗-->
            <!--          加减分弹窗-->
            <a-modal
                :body-style="bodyStyle"
                v-model:visible="ygState.addOrReduceVisible"
                centered
                width="410px"
                destroy-on-close
                :ok-button-props="{ loading: addOrReduceLoading }"
                @ok="handlerSubmitScore"
                :after-close="resetPlusMinusForm"
            >
                <template #title>
                    <span class="modal-title">{{ recordChangeType }}加减分</span>
                </template>
                <a-form :model="plusMinusPoints" ref="scoreRef">
                    <a-form-item
                        label="类型"
                        :label-col="{ span: 7 }"
                        name="type"
                        :rules="{ required: true, message: '请选择加减分类型', trigger: 'blur' }"
                    >
                        <a-radio-group v-model:value="plusMinusPoints.type">
                            <a-radio value="加分">加分</a-radio>
                            <a-radio value="减分">减分</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item
                        name="score"
                        label="分数"
                        :label-col="{ span: 7 }"
                        :rules="[
                            {
                                required: true,
                                pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                message: '请输入大于0的数字(支持0.5的倍数)',
                                trigger: 'blur'
                            }
                        ]"
                    >
                        <a-input-number
                            placeholder="请输入分数，支持以0.5为倍数的数字"
                            v-model:value="plusMinusPoints.score"
                            style="width: 100%"
                        />
                    </a-form-item>
                    <a-form-item
                        name="detail"
                        label="加减分详情"
                        :label-col="{ span: 7 }"
                        :rules="[{ required: true, message: '请输入加减分详情', trigger: 'blur' }]"
                    >
                        <a-textarea :rows="3" placeholder="请输入加减分详情" v-model:value="plusMinusPoints.detail" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--          加减分弹窗-->
            <!--          导出弹窗-->
            <div class="ygjx-div">
                <a-row :gutter="16">
                    <!--                    <a-col :span="4">-->
                    <!--                        <div class="left-tree">-->
                    <!--                            <span class="tree-title">组织架构</span>-->
                    <!--                            <a-input-search-->
                    <!--                                v-model:value="ygState.searchValue"-->
                    <!--                                style="margin-bottom: 8px"-->
                    <!--                                placeholder="请输入"-->
                    <!--                                @change="getStaffTree"-->
                    <!--                            />-->
                    <!--                            <a-tree-->
                    <!--                                v-model:expandedKeys="ygState.expandedKeys"-->
                    <!--                                v-model:selectedKeys="ygState.selectedKeys"-->
                    <!--                                v-model:checkedKeys="ygState.checkedKeys"-->
                    <!--                                :tree-data="ygState.treeData"-->
                    <!--                                :fieldNames="{ children: 'children', title: 'name', key: 'staffInfoId' }"-->
                    <!--                                @select="treeSelect"-->
                    <!--                                :height="630"-->
                    <!--                            />-->
                    <!--                        </div>-->
                    <!--                    </a-col>-->
                    <a-col :span="24">
                        <!--                      选择组时显示列表-->
                        <div class="right-div">
                            <span class="right-title">{{ ygState.dateStr }}绩效列表</span>
                            <a-row class="row-size" :gutter="24">
                                <a-col :span="6">
                                    <a-form-item label="人员名称">
                                        <a-select
                                            v-model:value="ygState.filter.userName"
                                            :options="ygState.peopleList"
                                            show-search
                                            :field-names="{ label: 'label', value: 'value' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item label="月份筛选">
                                        <a-date-picker
                                            v-model:value="ygState.filter.month"
                                            picker="month"
                                            value-format="YYYY-MM"
                                            style="width: 100%"
                                            :allowClear="false"
                                            :disabled-date="disabledDate"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col class="row-size" :span="6">
                                    <a-space size="middle">
                                        <a-button type="primary" @click="getData()">查询</a-button>
                                        <a-button type="ghost" @click="resetTableData">重置</a-button>
                                    </a-space>
                                </a-col>
                                <a-col :span="6" style="display: flex; justify-content: end" class="row-size">
                                    <a-space size="middle">
                                        <a-button
                                            class="ant-btn-primary"
                                            type="ghost"
                                            @click="batchAdditionAndSubtractionPoints('批量', null, '批量领导')"
                                            >批量领导评分</a-button
                                        >
                                        <a-button
                                            class="ant-btn-primary"
                                            type="ghost"
                                            @click="batchAdditionAndSubtractionPoints('批量', null, '批量其他')"
                                            >批量其他加减分</a-button
                                        >
                                        <!--                                        <a-button class="ant-btn-primary" type="ghost" @click="exportPerformanceScores"-->
                                        <!--                                            >导出绩效分数</a-button-->
                                        <!--                                        > -->
                                        <a-button
                                            class="ant-btn-primary"
                                            type="ghost"
                                            @click="handlerUploadScore"
                                            :loading="exportLoading"
                                            >导出绩效分数</a-button
                                        >
                                    </a-space>
                                </a-col>
                            </a-row>
                            <div class="yg-table">
                                <a-table
                                    rowKey="id"
                                    bordered
                                    :row-selection="{
                                        selectedRowKeys: ygState.selectedRowKeys,
                                        onChange: onSelectChange,
                                        fixed: true
                                    }"
                                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                                    :scroll="{ y: '600px' }"
                                    :columns="columns"
                                    :data-source="ygState.tableData"
                                    :loading="ygState.tableLoading"
                                    @resizeColumn="handleTaskResizeColumn"
                                    :pagination="false"
                                >
                                    <template #bodyCell="{ column, record, text, index }">
                                        <template v-if="column.dataIndex === 'numIndex'">
                                            {{ index + 1 }}
                                        </template>
                                        <!--                       修正手动加减分               -->
                                        <template v-if="['leaderFraction', 'otherFraction'].includes(column.dataIndex)">
                                            <div v-if="text > 0" class="green-num">+{{ text }}</div>
                                            <div v-if="text < 0" class="red-num">{{ text }}</div>
                                            <div v-if="text === 0" class="default-num">+{{ text }}</div>
                                        </template>
                                        <template v-if="column.dataIndex === 'behaviorFractionDescription'">
                                            <a-tooltip
                                                @mouseenter="handlerGetStandard(text)"
                                                :overlay-style="tooltipStyle"
                                                placement="right"
                                            >
                                                <template #title>
                                                    <p
                                                        style="margin: 0"
                                                        v-for="(item, index) in behaviorFractionDescriptionList"
                                                        :key="index"
                                                        >{{ item }}</p
                                                    >
                                                </template>
                                                <div class="behavior-div"> {{ text }}</div>
                                            </a-tooltip>
                                        </template>
                                        <template v-if="column.dataIndex === 'resultFractionDescription'">
                                            <a-tooltip
                                                @mouseenter="handlerGetResult(text)"
                                                :overlay-style="tooltipStyle"
                                                placement="right"
                                            >
                                                <template #title>
                                                    <p
                                                        style="margin: 0"
                                                        v-for="(item, index) in resultFractionDescriptionList"
                                                        :key="index"
                                                        >{{ item }}</p
                                                    >
                                                </template>
                                                <div class="result-div"> {{ text }}</div>
                                            </a-tooltip>
                                        </template>
                                        <!--                                      系统加减分-->
                                        <template v-if="column.dataIndex === 'systemScoreChanges'">
                                            <div v-if="record.systemScoreChanges > 0" class="green-num"
                                                >+{{ record.systemScoreChanges }}</div
                                            >
                                            <div v-if="record.systemScoreChanges < 0" class="red-num">{{
                                                record.systemScoreChanges
                                            }}</div>
                                            <div v-if="record.systemScoreChanges === 0" class="default-num"
                                                >+{{ record.systemScoreChanges }}</div
                                            >
                                        </template>
                                        <template v-if="column.dataIndex === 'operate'">
                                            <a-button
                                                type="link"
                                                size="small"
                                                @click="handleGiveScore(record, '上级主管')"
                                                >上级主管评分</a-button
                                            >
                                            <a-button type="link" size="small" @click="handleGiveScore(record, 'PMO')"
                                                >PMO评分</a-button
                                            >
                                            <a-button
                                                type="link"
                                                size="small"
                                                @click="batchAdditionAndSubtractionPoints('单独', record, '领导')"
                                                >领导评分</a-button
                                            >
                                            <a-button
                                                type="link"
                                                size="small"
                                                @click="batchAdditionAndSubtractionPoints('单独', record, '其他')"
                                                >其他加减分</a-button
                                            >
                                        </template>
                                    </template>
                                </a-table>
                            </div>
                        </div>
                        <!--                      选择组时显示列表-->
                        <!--                      选择人时显示员工绩效详情-->
                        <!--                      选择人时显示员工绩效详情-->
                    </a-col>
                </a-row>
            </div>
            <!-- end vid_i5vpkrwxor 自定义模板_91za6gac5d -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        const formattedMonth = dayjs()
        const lastMonth = dayjs().subtract(1, 'month')
        // 格式化时间为 yyyy-mm
        ygState.filter.month = lastMonth.format('YYYY-MM')
        ygState.dateStr = lastMonth.format('YYYY年MM月')

        getData()
    })
    function isCurrentMonth() {
        return dayjs(ygState.filter.month).isSame(dayjs(), 'month')
    }
    const ygState = reactive({
        expandedKeys: [],
        selectedKeys: [],
        checkedKeys: [],
        searchValue: '',
        dateStr: '',
        filter: {
            userName: '',
            month: undefined
        },
        tableLoading: false,
        treeData: [],
        selected: {},
        projectNameList: [],
        tableData: [],
        peopleList: [],
        selectedRowKeys: [],
        exportScoreVisible: false,
        addOrReduceVisible: false,
        giveScoreVisible: false,
        fileList: [],
        staffType: 'DEPARTMENT',
        isTableIn: false
    })
    const overlayStyle = {
        maxWidth: 'unset'
    }
    const plusMinusPoints = reactive({
        type: '加分',
        score: undefined,
        detail: undefined
    })
    const giveScoreForm = reactive({
        type: '加分',
        score: undefined,
        detail: undefined
    })
    const giveScroeType = ref({
        type: '',
        title: '',
        obj: {}
    })
    const columns = ref([
        { title: '序号', dataIndex: 'numIndex', align: 'center', width: 100, resizable: true },
        // {
        //     title: '部门名称',
        //     dataIndex: 'departmentName',
        //     align: 'center',
        //     ellipsis: true,
        //     width: 115,
        //     resizable: true
        // },
        { title: '人员姓名', dataIndex: 'userName', width: 100, align: 'center', ellipsis: true, resizable: true },
        // { title: '角色', dataIndex: 'js', width: 100, align: 'center', ellipsis: true, resizable: true },
        // { title: '参与项目数', dataIndex: 'projectNum', width: 105, align: 'center', ellipsis: true, resizable: true },
        // { title: '参加目标数', dataIndex: 'goalsNum', width: 105, align: 'center', ellipsis: true, resizable: true },
        {
            title: '项目结果分',
            dataIndex: 'resultFraction',
            width: 120,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '项目结果分详情',
            dataIndex: 'resultFractionDescription',
            width: 140,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: 'PPM行为分',
            dataIndex: 'behaviorFraction',
            width: 120,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: 'PPM行为分详情',
            dataIndex: 'behaviorFractionDescription',
            width: 140,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '上级主管评分',
            dataIndex: 'managerFraction',
            width: 125,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '上级主管评分备注',
            dataIndex: 'managerFractionDescription',
            width: 155,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        { title: 'PMO评分', dataIndex: 'pmoFraction', width: 120, align: 'center', ellipsis: true, resizable: true },
        {
            title: 'PMO评分备注',
            dataIndex: 'pmoFractionDescription',
            width: 140,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '领导评分',
            dataIndex: 'leaderFraction',
            width: 125,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '领导评分备注',
            dataIndex: 'leaderFractionDescription',
            width: 135,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '其他加减分',
            dataIndex: 'otherFraction',
            width: 120,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '其他加减分详情',
            dataIndex: 'otherFractionDescription',
            width: 140,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '合计分数',
            dataIndex: 'finalFraction',
            width: 130,
            align: 'center',
            ellipsis: true,
            resizable: true,
            fixed: 'right',
            customCell: () => {
                return {
                    style: {
                        color: '#262626',
                        fontWeight: 'bold'
                    }
                }
            }
        },
        { title: '操作', dataIndex: 'operate', width: 380, align: 'center', ellipsis: true, fixed: 'right' }
    ])

    watch(
        () => ygState.filter.month,
        () => {
            if (ygState.filter.month) {
                const formattedDate = dayjs(ygState.filter.month, 'YYYY-MM').format('YYYY年MM月')
                ygState.dateStr = formattedDate
            }
        },
        { deep: true }
    )

    function resetTableData() {
        ygState.filter.userName = ''
        const lastMonth = dayjs().subtract(1, 'month')

        // 格式化时间为 yyyy-mm
        ygState.filter.month = lastMonth.format('YYYY-MM')

        ygState.dateStr = lastMonth.format('YYYY年MM月')
        getData()
    }

    function getData() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/list?userName=&month=${ygState.filter.month}`).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                ygState.peopleList = data.data.map(item => {
                    return {
                        label: item.userName,
                        value: item.userName
                    }
                })
            }
        )
        ygState.tableLoading = true
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/list?userName=${ygState.filter.userName}&month=${ygState.filter.month}`
        )
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                ygState.tableData = data.data
            })
            .finally(() => {
                ygState.tableLoading = false
            })
    }
    function formatData(data) {
        return data.map(project => {
            project.taskDtoList = groupMilepostData(project.taskDtoList)
            return project
        })
    }

    // 格式化
    function groupMilepostData(data) {
        let currentProjectMilepost = ''
        return data.map((item, index) => {
            if (currentProjectMilepost !== item.projectMilepost) {
                currentProjectMilepost = item.projectMilepost
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentProjectMilepost === data[i].projectMilepost) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
            } else {
                item.rowSpan = 0
            }
            return item
        })
    }

    //
    //     筛选树接口
    function getTree() {
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/project_tree', {}).then(data => {
            if (data.code === 200) {
                ygState.projectNameList = data.data
            } else {
                message.error(data.message)
            }
        })
    }

    const bodyStyle = {
        paddingTop: '12px',
        paddingBottom: '15px',
        paddingLeft: '24px',
        paddingRight: '24px'
    }

    //     导出模板
    function downScoreTemplate({ url, name }) {
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/download_template', null, {
            responseType: 'blob',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(res => {
            downloadExcel(res, '绩效.xlsx')
        })
    }

    function downloadExcel(response, name) {
        const blob = new Blob([response], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = name // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href)
        return href
    }

    function handlerUploadScore() {
        exportLoading.value = true
        post(
            `/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/export`,
            { month: ygState.filter.month },
            {
                responseType: 'arraybuffer'
            }
        )
            .then(res => {
                downloadExcel(res, '绩效分数.xlsx')
                ygState.exportScoreVisible = false
                ygState.fileList = []
            })
            .finally(() => {
                exportLoading.value = false
            })
    }
    function closeExport() {
        ygState.exportScoreVisible = false
        ygState.fileList = []
    }

    function handlerUpload(file) {
        // 检查文件类型是否为 xlsx 或 xls
        if (!/\.xlsx?$/.test(file.name.toLowerCase())) {
            message.error('只能上传 xlsx 或 xls 文件')
            return false
        }

        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    ygState.fileList = [
                        ...ygState.fileList,
                        {
                            uid: file.uid,
                            lastModified: file.lastModified,
                            name: file.name,
                            size: file.size,
                            type: file.type,
                            status: 'done',
                            url: fullUrl
                        }
                    ]
                    const fileList = ygState.fileList.map(file => ({
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: file.status,
                        url: file.url
                    }))
                    console.log('调接口')
                    post('/solution-ppm/api/v2/built-in-system-ppm/emgf/upload_template', {
                        ppmEnclosureInfoList: fileList
                    }).then(data => {
                        if (data.code === 200) {
                            message.success('上传成功')
                        } else {
                            message.error(data.message)
                        }
                    })
                }
            })
            .catch(error => {
                // 处理文件上传失败情况
                message.error('上传文件失败')
            })

        return false
    }

    function handleRemove(file) {
        ygState.fileList = ygState.fileList.filter(item => item.uid !== file.uid)
    }

    const scoreRef = ref(null)
    const giveScoreRef = ref(null)

    // 用法示例
    // 单个评分的id
    const recordChangesId = ref()
    // 批量评分的id数组
    const recordChangesIdList = ref([])
    const recordChangeFlag = ref('批量')
    const recordChangeType = ref('')
    const roleMap = {
        '上级主管': 'MANAGER',

        'PMO': 'PMO',

        '领导': 'LEADER',
        '批量领导': 'LEADER',

        '其他': 'OTHER',
        '批量其他': 'OTHER'
    }
    // 批量加减分
    function batchAdditionAndSubtractionPoints(flag, record, type) {
        recordChangeFlag.value = flag
        recordChangeType.value = type
        if (recordChangeFlag.value === '批量') {
            if (ygState.selectedRowKeys.length < 1) {
                message.info('请至少选择一条数据')
            } else {
                ygState.addOrReduceVisible = true
            }
        } else {
            if (type === '领导') {
                plusMinusPoints.type = record.leaderFraction ? (record.leaderFraction > 0 ? '加分' : '减分') : '加分'
                plusMinusPoints.score = Math.abs(record.leaderFraction)
                plusMinusPoints.detail = record.leaderFractionDescription
                ygState.addOrReduceVisible = true
                recordChangesId.value = record.id
            } else {
                plusMinusPoints.type = record.otherFraction ? (record.otherFraction > 0 ? '加分' : '减分') : '加分'
                plusMinusPoints.score = Math.abs(record.otherFraction)
                plusMinusPoints.detail = record.otherFractionDescription
                ygState.addOrReduceVisible = true
                recordChangesId.value = record.id
            }
        }
    }

    // 评分
    function handleGiveScore(record, flag) {
        giveScroeType.value.title = flag
        giveScoreForm.type = '加分'
        if (flag === '上级主管') {
            giveScoreForm.score = record.managerFraction
            giveScoreForm.detail = record.managerFractionDescription
        } else if (flag === 'PMO') {
            giveScoreForm.score = record.pmoFraction
            giveScoreForm.detail = record.pmoFractionDescription
        }
        ygState.giveScoreVisible = true
        recordChangesId.value = record.id
    }
    // 关闭评分
    function cancelGiveScore() {
        resetGiveScoreForm()
        ygState.giveScoreVisible = false
    }
    const addOrReduceLoading = ref(false)
    const giveScordLoading = ref(false)

    //     保存加减分
    function handlerSubmitScore() {
        scoreRef.value.validate().then(() => {
            addOrReduceLoading.value = true
            if (recordChangeFlag.value === '批量') {
                put('/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/score_changes_batch', {
                    idList: ygState.selectedRowKeys,
                    changeType: plusMinusPoints.type,
                    changeScore: plusMinusPoints.score,
                    detail: plusMinusPoints.detail,
                    operateRole: roleMap[recordChangeType.value]
                })
                    .then(data => {
                        if (data.code === 200) {
                            message.success('操作成功')
                            ygState.addOrReduceVisible = false
                            getData()
                        } else {
                            message.error(data.message)
                        }
                    })
                    .finally(() => {
                        addOrReduceLoading.value = false
                    })
            } else {
                put('/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/score_changes ', {
                    id: recordChangesId.value,
                    changeType: plusMinusPoints.type,
                    changeScore: plusMinusPoints.score,
                    detail: plusMinusPoints.detail,
                    operateRole: roleMap[recordChangeType.value]
                })
                    .then(data => {
                        if (data.code === 200) {
                            message.success('操作成功')
                            ygState.addOrReduceVisible = false
                            getData()
                        } else {
                            message.error(data.message)
                        }
                    })
                    .finally(() => {
                        addOrReduceLoading.value = false
                    })
            }
        })
    }
    //     评分保存
    function handlerSubmitGiveScore() {
        giveScoreRef.value.validate().then(() => {
            giveScordLoading.value = true
            put('/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/score_changes ', {
                id: recordChangesId.value,
                changeType: giveScoreForm.type,
                changeScore: giveScoreForm.score,
                detail: giveScoreForm.detail,
                operateRole: roleMap[giveScroeType.value.title]
            })
                .then(data => {
                    if (data.code === 200) {
                        message.success('操作成功')
                        ygState.giveScoreVisible = false
                        getData()
                    } else {
                        message.error(data.message)
                    }
                })
                .finally(() => {
                    giveScordLoading.value = false
                })
        })
    }

    // 清除表单
    function resetPlusMinusForm() {
        plusMinusPoints.type = '加分'
        plusMinusPoints.score = undefined
        plusMinusPoints.detail = undefined
    }
    // 清除表单
    function resetGiveScoreForm() {
        giveScoreForm.type = '加分'
        giveScoreForm.score = undefined
        giveScoreForm.detail = undefined
    }

    //     导出绩效分数
    function exportPerformanceScores() {
        ygState.exportScoreVisible = true
    }

    const exportLoading = ref(false)
    const disabledDate = current => {
        // 获取当前日期的年月
        const currentYearMonth = dayjs(current).format('YYYY-MM')
        // 获取今天的年月
        const todayYearMonth = dayjs().format('YYYY-MM')
        // 禁用当月及以后的月份
        return currentYearMonth > todayYearMonth
    }
    function handleTaskResizeColumn(w, col) {
        console.log(w)
        console.log(col, 'col')
        // 根据列标题来确定不同的 div
        const width = w - 10
        let div = null
        if (col.title === 'PPM行为分详情') {
            div = document.querySelectorAll('.behavior-div')
        } else if (col.title.includes('项目结果分详情')) {
            div = document.querySelectorAll('.result-div')
        } else if (col.title === '总目标') {
            div = document.querySelectorAll('.default-gant-title-total')
        } else if (col.title === '子目标') {
            div = document.querySelectorAll('.default-gant-title-zmb')
        }
        console.log(div, 'div')
        // 如果找到了对应的 div，更新其宽度
        if (div.length > 0) {
            div.forEach(item => {
                item.style.width = `${width}px`
            })
        }
        col.width = w
    }

    const behaviorFractionDescriptionList = ref([])
    const resultFractionDescriptionList = ref([])
    // 新-模板项目审核标准格式
    function handlerGetStandard(text) {
        behaviorFractionDescriptionList.value = text?.split(/[,;；]/)
    }
    function handlerGetResult(text) {
        resultFractionDescriptionList.value = text?.split(/[,;；]/)
    }
    const onSelectChange = selectedRowKeys => {
        ygState.selectedRowKeys = selectedRowKeys
    }
    const tooltipStyle = {
        maxWidth: '600px',
        maxHeight: '600px',
        overflowY: 'auto'
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .ygjx-div {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .left-tree,
    .right-div {
        height: 100%;
        min-height: 800px;
        background-color: #fff;
    }

    .jx-detail {
        height: 100%;
        min-height: 800px;
    }

    .left-tree {
        padding: 16px 24px;
    }

    .tree-title {
        display: inline-block;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .right-div {
        padding: 20px 24px;
    }

    .right-title {
        display: inline-block;
        font-size: 18px;
        color: #3875ff;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .row-size {
        height: 32px;
        margin-bottom: 12px;
    }

    .ant-btn-primary {
        color: #3875ff;
        border-color: #3875ff;
    }
    .yg-table :deep(.@{ant-prefix}-table-thead) > tr {
        height: 40px;
    }

    .yg-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #ffffff;
        border-bottom: 1px solid #3875ff;
        padding: 8px 16px;
    }

    .yg-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }

    .export-title {
        width: 532px;
        height: 61px;
        background: rgba(56, 117, 255, 0.1);
        padding: 8px 16px;
        font-size: 14px;
        color: #262626;
        text-align: justify;
        line-height: 22px;
        font-weight: 400;
        display: flex;
        margin-bottom: 12px;
    }

    .export-content {
        display: inline-block;
        margin-left: 8px;
    }

    /*绩效详情*/
    .detail-top {
        height: 64px;
        border-radius: 2px;
        background-color: #fff;
        padding: 19px 24px;
        display: flex;
        margin-bottom: 16px;
        justify-content: space-between;
    }

    .detail-title {
        font-size: 18px;
        color: #262626;
        font-weight: 600;
    }

    .detail-msg {
        background: #ffffff;
        border-radius: 2px;
        height: 150px;
        padding: 16px 24px;
        display: flex;
    }

    .detail-name {
        display: flex;
        flex-direction: column;
        margin-left: 24px;
    }

    .avatar {
        margin: 9px 0;
        width: 60px;
    }

    .people-name {
        min-height: 50%;
        font-size: 24px;
        color: #1d2129;
        letter-spacing: 0;
        font-weight: 800;
        margin-right: 11px;
    }

    .department-title {
        font-size: 14px;
        color: #1d2129;
        letter-spacing: 0;
        font-weight: 800;
    }
    .title-tip {
        font-size: 14px;
        color: #1d2129;
        letter-spacing: 0;
    }
    .normal-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 8px;
    }

    .weight-font {
        font-size: 20px;
        color: #262626;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    .color-font {
        color: #3875ff;
    }

    .other {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .other-top,
    .other-bottom {
        height: 50%;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        display: flex;
    }
    .other-bottom {
        position: relative;
        top: 10px;
    }

    .other-bottom span {
        bottom: 0;
    }

    .other-bottom-item,
    .other-top-item {
        flex: 1;
    }
    .other-bottom-item:first-child {
        flex: 1.2; /* 使第一个项目占用两倍于其他项目的空间 */
    }
    .other-bottom-item:last-child {
        flex: 1.2; /* 使第一个项目占用两倍于其他项目的空间 */
    }
    .unit-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    .end-font {
        font-size: 20px;
        color: #6f6f6f;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    :deep(.ant3-collapse-header) {
        padding: 0 !important;
        border: none !important;
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
        padding: 0 !important;
    }

    :deep(.ant3-collapse-item) {
        margin-bottom: 8px;
    }

    :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
        border-radius: 4px;
        color: #3875ff;
        border-color: #3875ff !important;
    }

    .expand {
        width: 30px;
        font-size: 14px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 30px;
        line-height: 40px;
    }

    /*
default-div平台、市场、交付-通用项目
*/
    .default-div,
    .template-div,
    .record-div,
    .correct-div,
    .action-div {
        margin-top: 16px;
        background: #ffffff;
        border-radius: 2px;
    }

    .record-div {
    }

    .correct-div {
    }

    .default-title,
    .template-title,
    .record-title,
    .correct-title,
    .action-title {
        padding: 13px 24px;
        background-image: linear-gradient(270deg, rgba(105, 173, 255, 0) 0%, rgba(56, 117, 255, 0.15) 100%);
        border-radius: 2px 2px 0 0;
        height: 48px;
        display: flex;
        line-height: 24px;
    }

    .default-content,
    .template-content {
        padding: 16px 24px;
    }

    .default-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442777026263121920.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .no-title-img {
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .template-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442804996583325696.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .no-template-title-img {
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .record-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442808794796130304.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .correct-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442809384378957824.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .action-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442835960772558848.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .title-type {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 600;
        margin-right: 12px;
    }

    .title-workHour {
        margin-right: 16px;
    }

    .title-line {
        height: 14px;
        width: 1px;
        background-color: #595959;
        margin-right: 12px;
        margin-top: 6px;
    }

    .title-weight-font {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .title-normal-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }

    .title-score {
        margin-right: 16px;
    }

    /*default-div平台、市场、交付-通用项目*/
    .content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1.3fr repeat(6, 1fr);
        /* 根据需要调整列数 */
    }

    .collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 1.3fr repeat(6, 1fr);
        /* 根据需要调整列数 */
    }

    .collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .collapse-title div:nth-child(n + 2),
    .content-title div:nth-child(n + 2) {
        margin-right: 25px;
    }

    .collapse-title div:last-child {
        margin-right: 35px;
    }

    .content-title div:last-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-right: 35px;
    }

    .content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item) {
        border: none;
    }

    :deep(.ant3-collapse-content-box) {
        background-color: #fff !important;
    }

    .collapse-weight-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .too-long,
    .template-too-long,
    .action-too-long {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: 210px;
    }

    .template-too-long {
        width: 300px;
    }

    .action-too-long {
        width: 250px;
    }

    .default-table {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f7f7f7;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr:not(:last-child)
        > th {
        border-bottom: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th {
        border-right: 1px solid #d9d9d9;
    }

    /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
    .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
        border-left: none;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th[colstart='0']:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-header
        table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        > .@{ant-prefix}-table-content
        > table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table-thead)
        > tr
        > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
            .@{ant-prefix}-table-row-expand-icon-cell
        ):not([colspan])::before {
        background: #d9d9d9;
        width: 1px;
    }

    /*表格*/
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td {
        border-right: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /*行动项任务*/
    /*default-div平台、市场、交付-通用项目*/
    .action-content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1.3fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .action-collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 1.3fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .action-collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .action-collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .action-content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .action-content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    /*模板任务*/
    /*default-div平台、市场、交付-通用项目*/
    .template-content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 2.1fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .template-collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 2.1fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .template-collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .template-collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 48px;
    }

    .template-content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 48px;
    }

    .template-content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .green-num,
    .red-num,
    .default-num {
        width: 50px;
        height: 20px;
        border-radius: 2px;
        line-height: 20px;
        margin: 0 auto;
    }

    .green-num {
        background: rgba(82, 196, 26, 0.1);
        border: 1px solid #52c41a;
        color: #52c41a;
    }

    .red-num {
        background: rgba(245, 34, 45, 0.1);
        border: 1px solid #f5222d;
        color: #f5222d;
    }

    .default-num {
        background: rgba(38, 38, 38, 0.1);
        border: 1px solid #bfbfbf;
        color: #262626;
    }

    :deep(.table-striped) td {
        background-color: #f8fafc;
    }

    .blue-font {
        color: #3875ff;
    }

    .red-font {
        color: #f5222d;
    }

    .green-font {
        color: #52c41a;
    }
    :deep(.ant3-select-selection-item) {
        max-width: 260px;
    }
    .tip {
        font-weight: 800;
    }
    .warn-score {
        color: red;
    }
    .good-score {
        color: #52c41a;
    }
    .normal-score {
        pointer-events: none; /* 禁止所有的鼠标和指针事件 */
        cursor: not-allowed; /* 鼠标指针显示为不允许的样式 */
    }
    .detail-top-title {
        display: flex;
        height: 30px;
        border-bottom: 1px solid #9bbaff;
    }
    .detail-first {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #262626;
        font-weight: 400;
    }
    .red-weight {
        font-size: 18px;
        color: #f5222d;
        font-weight: 600;
        margin-right: 24px;
    }
    .detail-second {
        font-size: 16px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .litter {
        font-size: 16px;
    }
    .detail-item {
        border-left: 4px solid #3875ff;
        padding-left: 8px;
        margin-top: 15px;
        height: 16px;
        line-height: 16px;
        margin-bottom: 12px;
    }
    .user-img {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        top: 5px;
        cursor: pointer;
    }
    .disabled-div {
        background: rgba(38, 38, 38, 0.1);
        width: 100%;
    }
    .other-middle {
        height: 40px;
        background-color: #fef4d9;
        line-height: 40px;
        padding-left: 16px;
        color: #262626;
    }
    .short {
        height: 110px;
    }
    .behavior-div,
    .result-div {
        width: 130px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
